<script setup lang="ts">
import ChannelNav from '@/components/ChannelNav.vue';
import ArticleList from '@/components/ArticleList.vue';
import { onMounted, ref } from 'vue';
import { getChannelAPI } from '@/api/channel';
import type { ChannelItem } from '@/types';

const activeId = ref(0)
const channelList = ref<ChannelItem[]>([])

onMounted(() => {
    getChannel()
})

async function getChannel() {
    const result = await getChannelAPI()
    channelList.value = result.channels // 赋值列表
}

function updateActiveId(id: number) {
    activeId.value = id
}

</script>

<template>
    <ChannelNav :channels="channelList" :activeId="activeId" @updata-active-id="updateActiveId"></ChannelNav>
    <ArticleList></ArticleList>
</template>
<style scoped></style>